import { Outlet, NavLink } from "react-router-dom";
import React, { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import "./index.css";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  ShopbagOutline,
  AddSquareOutline,
  UserOutline,
} from "antd-mobile-icons";
const Index: React.FC = () => {
  const tabs = [
    {
      key: "/home/home",
      title: <NavLink to="/home/home">微脉</NavLink>,
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: "/home/jiang",
      
      title: <NavLink to="/home/jiang">寻医</NavLink>,
      icon:<AddSquareOutline />,
      badge: "5",
    },
    {
      key: "/home/my",
      title: <NavLink to="/home/my">直播</NavLink>,
      icon:   <MessageOutline />,
   
    },
    {
      key: "/home/shop",
      title: <NavLink to="/home/shop">健康商城</NavLink>,
      icon:<ShopbagOutline />,
    },
    {
      key: "/home/zhi",
      title: <NavLink to="/home/zhi">我的</NavLink>,
      icon: <UserOutline />,
    },
  ];

  const [activeKey, setActiveKey] = useState("todo");

  return (
    <div>
      <Outlet />
      <div className="tabbar">
        <TabBar activeKey={activeKey} onChange={setActiveKey} safeArea>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default Index;
